require(['./config'],() => {
    require(['request', 'template', 'header', 'footer'],(req,template,header) => {
        class ShopBaskt{
            constructor(){
                this.totalCount = 0
                this.totalPrice = 0
                this.prodList = []
                this.init()
            }
            init(){
                let prodList = localStorage.getItem('prodList') ? JSON.parse(localStorage.getItem('prodList')) : []
                $(".regular-list").html(template('cartTemplate',{prodList}))
                this.total(prodList)
                this.prodList = prodList
                this.bindEvent()
                this.checkAll()
                header.allCount()
            }
            //商品数量和总价
            total(prodList){
                this.totalCount = 0 
                this.totalPrice = 0
                prodList.forEach(item => {
                    this.totalCount += item.count
                    this.totalPrice += item.count * item.price
                })
                $('.cbx span').html(`&nbsp;${this.totalCount}&nbsp;`)
                $('.money').text(this.totalPrice.toFixed(2))
            }
            // 绑定事件  删除 
            bindEvent(){
                $('.regular-list')[0].onclick = e => {
                     const target = e.target
                     const id = $(target).attr('prodId') - 0
                     if(target.nodeName === 'A' && (target.className.indexOf('btn-del-item') != -1)){
                         this.prodList.forEach((item,index) => {
                             if(item.id === id){
                                 this.prodList.splice(index,1)
                             }
                         })
                     }

                    if(target.nodeName === 'A' && $(target).hasClass('btn-sub')){
                        // 点击的是 -
                        this.prodList.forEach(item => {
                            if(item.id === id){
                                item.count <= 1 ? '' : item.count--
                            }
                        })
                    }
                    if(target.nodeName === 'A' && $(target).hasClass('btn-add')){
                         //+
                        this.prodList.forEach(item => {
                            if(item.id === id){
                                item.count++
                            }
                        })
                    }
                    localStorage.setItem('prodList',JSON.stringify(this.prodList)) 
                    this.init()
                }
                
            }
            // 全选
            checkAll(){
                const _that = this
                // 全选按钮
                $(".btn-checkall")[0].onclick = function() {
                    $(this).toggleClass('checked')
                    _that.prodList.forEach(item => {
                        item.isChecked = $(this).hasClass('checked')
                    })
                    localStorage.setItem('prodList', JSON.stringify(_that.prodList))
                    // 重新渲染页面
                    _that.init()
                }
                const btns = Array.from(document.getElementsByClassName('btn-ckbox'))
                btns.forEach((item,index) => {
                    item.onclick = function(){
                        _that.prodList[index].isChecked = !(_that.prodList[index].isChecked)
                        localStorage.setItem('prodList', JSON.stringify(_that.prodList))
                        // 重新渲染页面
                        _that.init()

                    }
                })
            }
        }
        return new ShopBaskt()
    })
})